<template>
	<div class="base-info-wrapper">
		<custom-header-bar bg="1" title="查看资料" backStatus="1"></custom-header-bar>
		<div class="content-box" v-if="userInfo.uphone">
			<div class="title">基本信息</div>
			<div class="inner-box">
				<u--form class="form-wrapper" labelPosition="left" :labelStyle="labelStyle" labelWidth="180"
					:model="userInfo" ref="formUserInfo">
					<u-form-item :required="isEdit" label="上传头像:" prop="avatar" borderBottom ref="item1">
						<u-upload :disabled="!isEdit" :deletable="isEdit" :fileList="avatarFile" name="avatar"
							:maxCount="1"></u-upload>
					</u-form-item>
					<u-form-item :required="isEdit" label="手机号码:" prop="uphone" borderBottom ref="item1">
						<u--input placeholder="请输入手机号" disabled v-model="userInfo.uphone" border="none"></u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="证件号码:" prop="card" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" v-model="userInfo.card" border="none"></u--input>
						<image v-show="isEdit" mode="heightFix" class="image" src="/static/icon-carame.png"></image>
					</u-form-item>
					<u-form-item :required="isEdit" label="姓名:" prop="uname" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" v-model="userInfo.uname" border="none">
						</u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="出生日期:" prop="birthData" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" v-model="userInfo.birthData" border="none"></u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="年龄:" prop="age" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" v-model="userInfo.age" border="none"></u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="性别:" prop="sex" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" :value="
                userInfo.sex === '0' ? '男' : userInfo.sex === '1' ? '女' : ''
              " border="none"></u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="身高:" prop="height" borderBottom ref="item1">
						<u--input type="number" placeholder="请输入身高(厘米)" :disabled="!isEdit" v-model="userInfo.height"
							border="none"></u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="体重:" :disabled="!isEdit" prop="weight" borderBottom
						ref="item1">
						<u--input type="number" placeholder="请输入体重(KG)" v-model="userInfo.weight" border="none">
						</u--input>
					</u-form-item>
					<u-form-item :required="isEdit" label="籍贯:" prop="address" borderBottom ref="item1">
						<u--input disabled placeholder="请识别" v-model="userInfo.address" border="none"></u--input>
					</u-form-item>
				</u--form>
			</div>
			<div class="title">健康档案</div>
			<div class="inner-box" style="margin-top: 24upx">
				<u--form class="form-wrapper" labelPosition="left" :labelStyle="labelStyle" labelWidth="180"
					:model="userInfo" ref="formHospital">
					<u-form-item :required="isEdit" label="最近就医:" prop="medicalId" borderBottom ref="item1">
						<div class="form-item">
							<u--input placeholder="请选择" :value="medicalId" border="none" readonly></u--input>
						</div>
					</u-form-item>
					<u-form-item :required="isEdit" label="就医原因:" prop="medicalReasonsId" borderBottom ref="item1">
						<div class="form-item">
							<u--input placeholder="请选择" :value="medicalReasonsId" border="none" readonly></u--input>
						</div>
					</u-form-item>
					<u-form-item label="最近服用药:" prop="recentMedication" borderBottom ref="item1">
						<u--input placeholder="无" :disabled="!isEdit" v-model="userInfo.recentMedication" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="服药频率:" prop="drugFrequencyId" borderBottom ref="item1">
						<div class="form-item">
							<u--input disabled placeholder="无" :value="drugFrequencyId" border="none">
							</u--input>
						</div>
					</u-form-item>
					<div class="tag">常用药物</div>
					<u-form-item label="药物类别:" prop="drugCategoryId" borderBottom ref="item1">
						<div class="form-item">
							<u--input disabled placeholder="无" :value="drugCategoryId" border="none"></u--input>
						</div>
					</u-form-item>
					<u-form-item label=" " prop="drugName" borderBottom ref="item1">
						<u--input placeholder="无" :disabled="!isEdit" v-model="userInfo.drugName" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="上传照片:" prop="age" borderBottom ref="item1">
						<u-upload :fileList="drugsFile" :deletable="isEdit" :disabled="!isEdit" name="drugs"
							:maxCount="drugsFile.length"></u-upload>
					</u-form-item>
				</u--form>
			</div>
			<div class="title">紧急联系人</div>
			<div class="inner-box" style="margin-top: 24upx">
				<u--form class="form-wrapper" labelPosition="left" :labelStyle="labelStyle" labelWidth="180"
					:model="userInfo" ref="formContact">
					<u-form-item disabled label="姓名:" prop="relativesName" borderBottom ref="item1">
						<u--input placeholder="请输入姓名" v-model="userInfo.relativesName" border="none"></u--input>
					</u-form-item>
					<u-form-item label="手机号码:" prop="relativesPhone" borderBottom ref="item1">
						<u--input disabled placeholder="请输入手机号码" v-model="userInfo.relativesPhone" border="none">
						</u--input>
					</u-form-item>
					<u-form-item label="关系:" prop="relationshipId" borderBottom ref="item1">
						<div style="width: 100%">
							<u--input disabled placeholder="请选择" :value="relationshipId" border="none"></u--input>
						</div>
					</u-form-item>
				</u--form>
			</div>
		</div>
	</div>
</template>
<script>
	import {
		getUserInfo,
		myDrugInformation,
		myAvatar
	} from "@/api/my.js";
	import CustomHeaderBar from "@/components/custom-header-bar.vue";
	import {
		medicalFastdfs,
		drugCategorylist,
		medicalDatelist,
		medicalReasonslist,
		drugFrequencylist,
		relationshiplist,
		distinguish,
		getUploadToken,
	} from "@/api/info.js";
	export default {
		data() {
			return {
				labelStyle: {
					fontSize: "28upx",
					color: "#000000D9"
				},
				step: 0,
				userInfo: {},
				avatarFile: [],
				drugsFile: [],
				showPicker: false,
				selectInfo: {},
				pickerList: [],
				drugCategorylist: [],
				medicalDatelist: [],
				medicalReasonslist: [],
				drugFrequencylist: [],
				drugCategorylist: [],
				medicalId: "",
				medicalReasonsId: "",
				drugFrequencyId: "",
				relationshipId: '',
				relationshiplist: [],
				drugCategoryId: "",
				singleIndex: 0,
				isEdit: false,
			};
		},
		components: {
			CustomHeaderBar,
		},
		onLoad(options) {
			this.uphone = options.uphone;
			this.getUserInfo();
			this.getMyDrugInformation();
			this.getMyAvatar();
		},
		methods: {
			init() {
				this.getMedicalDatelist(); // 就医时间
				this.getMedicalReasonslist(); // 就医原因
				this.getDrugFrequencylist(); // 药物频率
				this.getDrugCategorylist(); // 药物类别
				this.getRelationshiplist(); // 用户关系
			},
			getUserInfo() {
				getUserInfo({
					uphone: this.uphone,
				}).then((res) => {
					this.userInfo = res.data.data;
					this.init()
				});
			},
			// 头像
			getMyAvatar() {
				myAvatar({
					userId: this.uphone,
				}).then((res) => {
					let info = {};
					if (Array.isArray(res.data.data) && res.data.data.length > 0) {
						info = res.data.data[0];
					} else {
						info = res.data.data;
					}
					info.url = info.fastdfsUrl;
					this.avatarFile.push(info);
				});
			},
			// 药品图片
			getMyDrugInformation() {
				myDrugInformation({
					userId: this.uphone,
				}).then((res) => {
					res.data.data.forEach((item) => {
						item.url = item.fastdfsUrl;
					});
					this.drugsFile = res.data.data;
				});
			},
			// 就医时间
			getMedicalDatelist() {
				medicalDatelist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.medicalId;
							item.name = item.medicalName;
							if (item.medicalId == this.userInfo.medicalId) {
								this.medicalId = item.medicalName;
							}
						});
						this.medicalDatelist = res.data.data;
					}
				});
			},
			// 就医原因
			getMedicalReasonslist() {
				medicalReasonslist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.medicalReasonsId;
							item.name = item.medicalReasonsName;
							if (item.medicalReasonsId == this.userInfo.medicalReasonsId) {
								this.medicalReasonsId = item.medicalReasonsName;
							}
						});
						this.medicalReasonslist = res.data.data;
					}
				});
			},
			// 药物类别
			getDrugCategorylist() {
				drugCategorylist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.drugCategoryId;
							item.name = item.drugCategoryName;
							if (item.drugCategoryId == this.userInfo.drugCategoryId) {
								this.drugCategoryId = item.drugCategoryName;
							}
						});
						res.data.data.unshift({
							name: '无',
							id: ''
						})
						this.drugCategorylist = res.data.data;
					}
				});
			},
			// 药物频率
			getDrugFrequencylist() {
				drugFrequencylist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.drugFrequencyId;
							item.name = item.drugFrequencyName;
							if (item.drugFrequencyId == this.userInfo.drugFrequencyId) {
								console.log(123);
								this.drugFrequencyId = item.drugFrequencyName;
							}
						});
						res.data.data.unshift({
							name: '无',
							id: ''
						})
						this.drugFrequencylist = res.data.data;
					}
				});
			},
			// 用户关系
			getRelationshiplist() {
				relationshiplist().then((res) => {
					if (res.data.code === 200) {
						res.data.data.forEach((item) => {
							item.id = item.relationshipId;
							item.name = item.relationshipName;
							if (item.relationshipId == this.userInfo.relationshipId) {
								this.relationshipId = item.relationshipName;
							}
						});
						this.relationshiplist = res.data.data;
					}
				});
			},
		},
	};
</script>
<style lang="scss" scoped>
	/deep/ .u-input {
		background-color: transparent !important;
	}

	.base-info-wrapper {
		height: 100%;
		padding: 160upx 0upx 50upx;
		box-sizing: border-box;
		background-color: #f4f4f4;
		display: flex;
		flex-direction: column;
		overflow-y: scroll;

		.title {
			padding: 0 30upx;
			color: #33ccac;
			font-weight: bold;
		}

		.tabs-list {
			background-color: #ffffff;
		}

		.content-box {
			flex: 1;
			padding: 24upx 0;
			box-sizing: border-box;

			.inner-box {
				background-color: #ffffff;
				border-radius: 24upx;
				padding: 24upx 36upx;
				margin: 24upx;
				overflow-y: auto;

				.tag {
					margin: 40upx 0;
					position: relative;
					left: -36upx;
					width: 230upx;
					height: 64upx;
					line-height: 64upx;
					background: #defff8;
					border-radius: 0px 0px 16upx 0px;
					color: #33ccac;
					font-weight: bold;
					font-size: 32upx;
					text-align: center;
				}

				.image {
					height: 44upx;
				}

				.arrow {
					height: 18upx;
				}

				display: flex;
				flex-direction: column;

				.form-wrapper {
					flex: 1;
				}

				.button {
					width: 100%;
					height: 88upx;
					line-height: 88upx;
					background: #61d7ca;
					border-radius: 10px 10px 10px 10px;
					opacity: 1;
					font-size: 34upx;
					color: #ffffff;
				}
			}
		}
	}

	.popup-bottom {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.success-tip {
		width: 416upx;
		box-sizing: border-box;
		padding: 40upx;
		text-align: center;

		.icon {
			width: 90upx;
			vertical-align: middle;
		}

		.title {
			margin-top: 15upx;
			font-size: 32upx;
		}

		.sub-title {
			margin-top: 24upx;
			font-size: 26upx;
			color: rgba(102, 102, 102, 1);
		}

		.button {
			margin-top: 48upx;
			width: 160upx;
			height: 60upx;
			line-height: 60upx;
			background: linear-gradient(-36deg,
					rgba(114, 215, 204, 0.8),
					rgba(40, 207, 179, 0.8));
			border-radius: 4upx;
			color: #ffffff;
			font-size: 26upx;
			border-radius: 8upx;
		}

		.home {
			background: #ebedf0;
			color: #bfbebe;
		}
	}

	.form-item {
		width: 100%;
	}
</style>
